/*
 * @Author: 小胖沱 1643200914@qq.com
 * @Date: 2022-12-19 14:08:38
 * @LastEditors: 小胖沱 1643200914@qq.com
 * @LastEditTime: 2023-01-05 11:27:49
 * @FilePath: \jk_sort_front\src\pages\QueryReport\ProductionBroad\index.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import classNames from 'classnames'
import { useEffect, useState } from 'react'

import useIsFullScreen from '@/components/useIsFullScreen'
import { reportGetProductionDashboard } from '@/recoil/productionBroad/api'

import Attendance from './components/attendance'
import BoardHead from './components/boardHead'
import FinishChart from './components/finishChart'
import ReservoirInventory from './components/reservoirInventory'
import StockNumber from './components/stockNumber'
import VoucherProduction from './components/voucherProduction'
import styles from './index.module.less'

export default () => {
  const [voucherData, setVoucherData] = useState<any[]>([])
  const [completedData, setCompletedData] = useState<any[]>([])
  const [areaStockData, setAreaStockData] = useState<any[]>([])
  const [ironData, setIronData] = useState<any[]>([])
  const [attendanceData, setAttendanceData] = useState<any>({})
  const { isFull, toggleFullScreen } = useIsFullScreen()

  const getDashBoardData = () => {
    reportGetProductionDashboard().then((response) => {
      if (response.success) {
        const { data = {} } = response
        const {
          styleCompletedAmountList,
          processesCompletedAmountList,
          areaStockList,
          ironAreaStyleStockList,
          actualAttendance
        } = data
        setVoucherData([...styleCompletedAmountList])
        setCompletedData([...processesCompletedAmountList])
        setAreaStockData([...areaStockList])
        setIronData([...ironAreaStyleStockList])
        setAttendanceData({ ...actualAttendance })
      }
    })
  }

  useEffect(() => {
    getDashBoardData()
    const timer = setInterval(() => {
      getDashBoardData()
    }, 10000)
    return () => {
      clearInterval(timer)
    }
  }, [])

  useEffect(() => {
    // setTimeout(() => {
    //   if (toggleFullScreen) {
    //     toggleFullScreen()
    //   }
    // }, 2000)
  }, [toggleFullScreen])

  return (
    <div className={classNames(styles.container, styles.screen)}>
      <BoardHead title="后道分拣生产看板" />
      <div className={styles.chartBox}>
        <div className={styles.chartLeft}>
          <div className={styles.leftTop}>
            <div className={styles.voucher}>
              <VoucherProduction data={voucherData} />
            </div>
            <div className={styles.finishNumber}>
              <FinishChart data={completedData} />
            </div>
          </div>
          <div className={styles.leftBottom}>
            <StockNumber data={ironData} />
          </div>
        </div>
        <div className={styles.chartRight}>
          <div className={styles.inventoryBox}>
            <ReservoirInventory data={areaStockData} />
          </div>
          <div className={styles.attendance}>
            <Attendance data={attendanceData} />
          </div>
        </div>
      </div>
    </div>
  )
}
